<template>
  <div :class="['VCard', { 'right-line': rightLine }]">
    <div class="VCard-title">{{ title }}</div>
    <div class="VCard-list">
      <div :style="getItemStyle()" class="VCard-item" v-for="(item, index) in dataList" :key="index">
        <!-- <div class="VCard-item-name">{{ item.name }}</div> -->
        <img :src="item.pic" alt="">
        <div class="VCard-item-value">
          <span class="VCard-item-num">{{ item.value }}</span>
          <span v-if="item.unit" class="VCard-item-unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

const props = defineProps({
  dataList: {
    type: Array as any,
    default: [],
    required: true
  },
  title: {
    type: String,
    default: '',
  },
  rightLine: {
    type: Boolean,
    default: false
  },
  itemMargin: {
    type: Number,
    default: 50
  },
  type: {
    type: String,
    default: 'big'
  },
})


function getItemStyle() {
  return {
    'margin-right': `${props.itemMargin}px`,
    'margin-left': `${props.itemMargin}px`
  }
}

</script>

<style lang="scss" scoped>
$colorText: #909399;
$colorText2: #595959;

.VCard {
  display: inline-block;

  padding: 0 30px;
  margin: 20px 0 50px 0;

  .VCard-list {
    display: flex;
    margin-top: 10px;

    .VCard-item {
      text-align: center;

      line-height: 34px;

      // 小
      .VCard-item-small-name {
        font-size: 16px;
        color: $colorText;
      }

      // 大
      .VCard-item-value {
        .VCard-item-unit {
          color: $colorText;
          margin-left: 10px;
        }

        .VCard-item-num {
          font-size: 20px;

        }
      }

      .VCard-item-name {
        font-size: 22px;
        color: $colorText;
      }
    }
  }

  .VCard-title {
    font-size: 20px;
    font-weight: bold;
  }
}

.center {
  display: flex;
  justify-content: center;
}


.right-line {
  border-right: 1px solid $colorText2 !important;
}
</style>
